<template>
  <div>
    <ElForm inline ref="form" :model="queryCondition">
      <ElFormItem label="请假类型" prop="leaveTypes">
        <ElSelect v-model="queryCondition.leaveTypes" multiple>
          <ElOption label="病假" value="sick"></ElOption>
          <ElOption label="年假" value="annual"></ElOption>
          <ElOption label="事假" value="issue"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="单据状态" prop="leaveBillStates">
        <ElSelect v-model="queryCondition.leaveBillStates" multiple>
          <!-- <ElOption label="待提交" value="toSubmit"></ElOption>
          <ElOption label="待审核" value="toAudit"></ElOption>
          <ElOption label="已通过" value="auditted"></ElOption> -->
          <ElOption
            v-for="(e, i) in stateDetails"
            :key="i"
            :label="e.label"
            :value="e.state"
          ></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem>
        <ElButton @click="reset()">reset</ElButton>
        <ElButton type="primary" @click="queryByCondition()">search</ElButton>
        <ElButton type="success" @click="open4Insert()">add</ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable :data="results">
      <ElTableColumn type="selection"></ElTableColumn>
      <ElTableColumn prop="leaveBillCode" label="流水号"></ElTableColumn>
      <ElTableColumn label="单据状态">
        <template #default="{ row }">
          <!-- <ElTag type="success">{{ row.billState }}</ElTag> -->
          <!-- <ElTag :type="tag(row)?.color">{{ tag(row)?.label }}</ElTag> -->
          <template v-for="(e, i) in stateDetails" :key="i">
            <ElTag v-if="e.state === row.billState" :type="e.color">{{ e.label }}</ElTag>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="leaveType" label="请假类型"></ElTableColumn>
      <ElTableColumn prop="reason" label="请假原因" width="300px"></ElTableColumn>
      <ElTableColumn label="操作区" fixed="right" width="400px">
        <template #default="{ row }">
          <ElButton size="small" type="warning" @click="open4Modify(row)" v-if="row.billState === 'toSubmit'"> 修改</ElButton>
          <ElButton size="small" type="warning" @click="open4ModifyEx(row)"> 修改Ex</ElButton>
          <ElPopconfirm @confirm="submit(row)" title="提交后无法修改，确定进行？" width="240px"> 
            <template #reference>
              <ElButton size="small" type="primary"> 提交</ElButton>
            </template>
          </ElPopconfirm>
          <ElButton size="small" type="danger" @click="remove(row)"> 废弃</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <LeaveInsert ref="leaveInsert" @post-insert="queryByCondition"></LeaveInsert>
    <LeaveModify ref="leaveModify" @post-modify="queryByCondition"></LeaveModify>
    <LeaveModifyEx ref="leaveModifyEx" @post-modify="queryByCondition"></LeaveModifyEx>
  </div>
</template>
<script lang="ts">
export type LeaveType = 'sick' | 'issue' | 'annual'
export type BillState = 'toSubmit' | 'toAudit' | 'auditted'
export type LeaveApplyQueryCondition = {
  leaveTypes: Array<LeaveType>
  leaveBillStates: Array<BillState>
  pageNum: number
  pageSize: number
}
export type LeaveBill = {
  leaveBillCode: string
  leaveType: LeaveType
  timeStart: Date | null
  timeEnd: Date | null
  reason: string | null
  applier: string | null
  applyTime: Date | null
  auditor: string | null
  auditWord: string | null
  auditTime: Date | null
  resentTimes: number
  billState: BillState
  modifyTime: Date | null
}

export default {
  name: 'LeaveApply',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      queryCondition: {
        leaveTypes: [],
        leaveBillStates: [],
        pageNum: 1,
        pageSize: 10
      } as LeaveApplyQueryCondition,
      results: [] as Array<LeaveBill>,
      total: 0,
      stateDetails: [
        { state: 'toSubmit', color: 'danger', label: '待提交' },
        { state: 'toAudit', color: 'warning', label: '待审核' },
        { state: 'auditted', color: 'success', label: '已通过' }
      ]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
    // tag() {
    //   return function (row: any) {
    //     const target = s.find((x) => x.state === row.billState)
    //     return target
    //   }
    // }
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    // sampleM() {},
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: '/leave/query/applier',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.results
    },
    reset() {
      const form: any = this.$refs.form
      form.resetFields()
    },
    open4Insert() {
      const leaveInsert: any = this.$refs.leaveInsert
      // leaevInsert.visible = true
      leaveInsert.show()
    },
    async open4Modify(row: LeaveBill) {
      const res = await axios({
        method: 'get',
        url: '/leave/find/' + row.leaveBillCode
      })
      // console.log(res.data)
      const leaveModify: any = this.$refs.leaveModify
      // leaveModify.leaveBill = res.data
      // leaveModify.visible = true
      leaveModify.show(res.data)
    },
    async open4ModifyEx(row :LeaveBill){
      const res = await axios({
        method: 'get',
        url: '/leave/find/' + row.leaveBillCode
      })
      const leaveModifyEx: any = this.$refs.leaveModifyEx
      leaveModifyEx.show(res.data)
    },
    async submit(row: LeaveBill) {
      const res = await axios({
        method: 'put',
        url: '/leave/submit/' + row.leaveBillCode
      })
      this.queryByCondition(1)
      // console.log(res.data)
    },
    async remove(row: LeaveBill) {
      const res = await axios({
        method: 'delete',
        url: '/leave/remove/' + row.leaveBillCode
      })
      this.queryByCondition()
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
